<script setup>
import EditorThree from "@/components/EditorThree.vue";
import { computed, ref } from "vue";
import { useStore } from "vuex";
import dialog from "wil-dialog";

const store = useStore();

const list = computed(() => store.state.list);
const resultList = computed(() => store.state.resultList);
const current = computed(() => store.state.current);

const title = ref("");
const content = ref("");

const onConfirm = () => {};
const onClose = () => {};
const onCancel = () => {};

const show = ref(true);
const isShowListForm = ref(false);
window.onkeydown = (e) => {
  if (e.code == "Insert") show.value = !show.value;
  if (e.code == "Delete") {
    /** 显示 Dialog */
    dialog.show({
      type: 1,
      title: "温馨提示",
      content: "此操作会删除全部数据，是否执行",
      cancelCb: function () {
        dialog.hide();
      },
      confirmCb: function () {
        localStorage.clear();
        localStorage.setItem("list", "[]");
        localStorage.setItem("resultList", "[]");
        store.commit("setState", { resultList: [], list: [] });
        dialog.hide();
      },
    });
  }
};
const handleResultChange = (e, key, index) => {
  let res = JSON.parse(JSON.stringify(resultList.value));
  const value = e.target.value;
  res[index][key] = value;
  store.commit("setState", { resultList: res });
};
const handleResultDelete = (index) => {
  let res = JSON.parse(JSON.stringify(resultList.value));
  res.splice(index, 1);
  store.commit("setState", { resultList: res });
};
const handleResultAdd = (index) => {
  let res = JSON.parse(JSON.stringify(resultList.value));
  res.push({ key: "标题", value: "内容" });
  store.commit("setState", { resultList: res });
};
const handleClear = () => {
  let res = JSON.parse(JSON.stringify(resultList.value));
  for (let i = 0; i < res.length; i++) {
    const element = res[i];
    element.value = "";
  }
  store.commit("setState", { resultList: res });
};
const handleChange = (html) => {
  content.value = html;
};
const handleAdd = () => {
  store.commit("setState", { current: -1 });
  isShowListForm.value = true;
};
const handleEdit = (index) => {
  isShowListForm.value = true;
  title.value = list.value[index].title;
  content.value = list.value[index].content;
  store.commit("setState", { current: index });
};
const handleDelete = (index) => {
  let res = JSON.parse(JSON.stringify(list.value));
  res.splice(index, 1);
  store.commit("setState", { list: res });
};
const handleCencel = () => {
  title.value = "";
  content.value = "";
  isShowListForm.value = false;
};
const handleSubmit = () => {
  if (current.value == -1) {
    let res = JSON.parse(JSON.stringify(list.value));
    res.push({
      title: title.value,
      content: content.value,
    });
    title.value = "";
    content.value = "";
    isShowListForm.value = false;
    store.commit("setState", { list: res });
  } else {
    let res = JSON.parse(JSON.stringify(list.value));
    res[current.value].title = title.value;
    res[current.value].content = content.value;
    title.value = "";
    content.value = "";
    isShowListForm.value = false;
    store.commit("setState", { list: res });
  }
};
</script>

<template>
  <div class="manage">
    <div class="tip">
      <span>按下键盘</span>
      <code>Delete</code>
      <span>键即可清除</span>
      <span class="red">所有数据</span>
    </div>
    <div class="tip">
      <span>按下键盘</span>
      <code>Insert</code>
      <span>键即可{{ show ? "隐藏" : "显示" }}后台管理</span>
    </div>
    <div class="box" v-show="show">
      <div class="text-box">
        <div class="list" v-if="!isShowListForm">
          <div class="title">
            <div class="left">数据列表</div>
            <div class="btn-add" @click="handleAdd">新增</div>
          </div>
          <div class="emtpy" v-if="!list.length">数据列表是空的</div>
          <div class="scroll-box">
            <div class="list-item" v-for="(item, index) in list" :key="index">
              <div class="label">{{ item.title }}</div>
              <div class="options">
                <div class="btn" @click="handleEdit(index)">编辑</div>
                <div class="btn" @click="handleDelete(index)">删除</div>
              </div>
            </div>
          </div>
        </div>
        <div class="result" v-if="!isShowListForm">
          <div class="title">
            <div class="left">声鉴报告</div>
            <div class="right">
              <div class="btn-clear" @click="handleClear">清空</div>
              <div class="btn-add" @click="handleResultAdd">新增</div>
            </div>
          </div>
          <div class="emtpy" v-if="!resultList.length">声鉴报告是空的</div>
          <div class="scroll-box">
            <div
              class="list-item"
              v-for="(item, index) in resultList"
              :key="index"
            >
              <input
                class="key"
                type="text"
                :value="item.key"
                @change="handleResultChange($event, 'key', index)"
              />
              <input
                class="value"
                type="text"
                :value="item.value"
                @change="handleResultChange($event, 'value', index)"
              />
              <div class="options">
                <div class="btn-del" @click="handleResultDelete(index)">
                  删除
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="form" v-if="isShowListForm">
          <div class="title">
            <span>正在</span>
            <span v-if="list.length && current > -1 && list[current]"
              >编辑 - {{ list[current].title }}</span
            >
            <span v-else>新增</span>
          </div>
          <div class="content">
            <input type="text" v-model="title" placeholder="请输入标题" />
            <EditorThree
              class="textarea"
              :value="content"
              @change2="handleChange"
            >
            </EditorThree>
            <div class="options">
              <button class="submit" @click="handleSubmit">确认</button>
              <button class="cencel" @click="handleCencel">取消</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang='scss'>
.tip {
  display: flex;
  align-items: center;
  .red {
    color: red;
    font-weight: bold;
  }
  code {
    display: inline-block;
    background-color: #ddd;
    padding: 0 8px;
    color: #333;
    // position: relative;
    // bottom: 1px;
    border-radius: 2px;
    margin: 0 6px;
  }
}
.manage {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
}

.text-box {
  width: 226px;
  margin: 10px 0;
  padding: 10px;
  background-color: #fff;
  color: #000;
  .btn-add {
    cursor: pointer;
    width: max-content;
    font-weight: normal;
    &:hover {
      color: plum;
    }
  }
  .btn-clear {
    cursor: pointer;
    width: max-content;
    margin-right: 5px;
    font-weight: normal;
    &:hover {
      color: plum;
    }
  }
  .list {
    border: 1px solid #000;
    padding: 5px;
    .scroll-box {
      height: 180px;
      overflow-y: scroll;
      overflow-x: hidden;
      &::-webkit-scrollbar {
        width: 4px;
        background-color: transparent;
      }
      &::-webkit-scrollbar-thumb {
        width: 4px;
        background-color: #c8efd4;
        border-radius: 2px;
      }
    }
    .title {
      font-weight: bold;
      margin-bottom: 5px;
      display: flex;
      justify-content: space-between;
    }
    .list-item {
      display: flex;
      justify-content: space-between;
      .options {
        display: flex;
        .btn {
          margin-left: 3px;
          cursor: pointer;
          &:hover {
            color: plum;
          }
        }
      }
    }
  }
  .result {
    border: 1px solid #000;
    padding: 5px;
    margin-top: 5px;
    .scroll-box {
      height: 180px;
      overflow-y: scroll;
      &::-webkit-scrollbar {
        width: 4px;
        height: 4px;
        background-color: transparent;
      }
      &::-webkit-scrollbar-thumb {
        width: 4px;
        height: 4px;
        background-color: #c8efd4;
        border-radius: 2px;
      }
    }
    .list-item {
      display: flex;
      border: 1px solid #000;
      // width: max-content;
      border-top-width: 0;
      &:first-of-type {
        border-top-width: 1px;
      }
      .key {
        width: 4em;
        padding: 5px;
        border: none;
        outline: none;
        border-right: 1px solid #000;
      }
      .value {
        flex: 1;
        min-width: 4em;
        padding: 5px;
        border: none;
        outline: none;
        border-right: 1px solid #000;
      }
      .options {
        padding: 5px;
        .btn-del {
          cursor: pointer;
          &:hover {
            color: plum;
          }
        }
      }
    }
    .title {
      font-weight: bold;
      margin-bottom: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .right {
        display: flex;
      }
    }
  }
  .form {
    margin-top: 5px;
    border: 1px solid #000;
    padding: 5px;
    .title {
      font-weight: bold;
      margin-bottom: 5px;
    }
    .content {
      input {
        display: block;
        box-sizing: border-box;
        width: 100%;
        height: 30px;
        padding: 0 5px;
        outline: none;
        border-radius: 0;
        border: 1px solid #c9d8db;
        border-bottom: 1px solid #eee;
      }
      :deep(.textarea) {
        margin-top: 5px;
        p {
          margin: 0;
        }
      }
      .options {
        margin-top: 5px;
        display: flex;
        .submit {
          display: block;
          height: 30px;
          margin-right: 5px;
          border-radius: 0;
          border: none;
          outline: none;
          background-color: #00a2e8;
          color: #fff;
        }
        .cencel {
          display: block;
          height: 30px;
          margin-right: 5px;
          border-radius: 0;
          border: none;
          outline: none;
          background-color: #a6a6a6;
          color: #fff;
        }
      }
    }
  }
}
</style>
